<template>
	<view class="content">
		<view class="head" >
			<view class="backstyle" >
			</view>
			<image :src="imgA" mode="widthFix"></image>
		</view>
		<!-- 商家内容标题部分 -->
		<view class="content-title">
			<view class="title-img"  @click="magnifyThree">
				<image :src="imgA"  mode=""></image>
			</view>
			<view class="title-font">
				<view class="fontBox">
					{{name}}
				</view>
				<view class="fontInfo">
					{{info}}
				</view>
			<!-- 	<view class="fontBox" >
					<uni-icon v-for="(n,ind) in star" type="star-filled"  size="15" class="star-filled" color="8e8e8e" :key="ind"></uni-icon>
				</view> -->
				<!-- <view class="fontBox">
					{{distance}}
				</view> -->
			</view>
			
		</view>
		<view class="BigBOX" v-show="dispalyImgThree" @click="clickshowThree">
			 <image :src="imgA" mode="" ></image>
		</view>
		<view class="tab" >
			<view class="tab-item" :class="selectIndex==1?'tab-item-checked':''" @click="changTab(1)">
				商品
			</view>
			<view class="tab-item" :class="selectIndex==2?'tab-item-checked':''" @click="changTab(2)">
				分类
			</view>
			<view class="tab-item" :class="selectIndex==3?'tab-item-checked':''" @click="changTab(3)">
				评价
			</view>
			<view class="tab-item" :class="selectIndex==4?'tab-item-checked':''" @click="changTab(4)">
				商家
			</view>
		</view>
		<view class="bbox">
			
		</view>
		<view  v-show="selectIndex==2">
			<view class="categroy">
				<view class="categroy-item">
					<image class="categroy-item-img" src="http://muyingshop.eonfox.com/icon/authentication.png" mode=""></image>
					<text class="categroy-item-text">商品分类</text>
				</view>
				<view class="categroy-item">
					<image class="categroy-item-img" src="http://muyingshop.eonfox.com/icon/authentication.png" mode=""></image>
					<text class="categroy-item-text">商品分类</text>
				</view>
				<view class="categroy-item">
					<image class="categroy-item-img" src="http://muyingshop.eonfox.com/icon/authentication.png" mode=""></image>
					<text class="categroy-item-text">商品分类</text>
				</view>
				<view class="categroy-item">
					<image class="categroy-item-img" src="http://muyingshop.eonfox.com/icon/authentication.png" mode=""></image>
					<text class="categroy-item-text">商品分类</text>
				</view>
				<view class="categroy-item">
					<image class="categroy-item-img" src="http://muyingshop.eonfox.com/icon/authentication.png" mode=""></image>
					<text class="categroy-item-text">商品分类</text>
				</view>
				<view class="categroy-item">
					<image class="categroy-item-img" src="http://muyingshop.eonfox.com/icon/authentication.png" mode=""></image>
					<text class="categroy-item-text">商品分类</text>
				</view>
				<view class="categroy-item">
					<image class="categroy-item-img" src="http://muyingshop.eonfox.com/icon/authentication.png" mode=""></image>
					<text class="categroy-item-text">商品分类</text>
				</view>
				<view class="categroy-item">
					<image class="categroy-item-img" src="http://muyingshop.eonfox.com/icon/authentication.png" mode=""></image>
					<text class="categroy-item-text">商品分类</text>
				</view>
			</view>
		</view>
		<view  v-show="selectIndex==3">
			<!-- 商家位置 -->
			<view class="evaluateTitle" >
				<view class="evaluateTitle-left">
					<view class="evaluateTitle-leftBack">
					</view>
					店铺评价
				</view>
				<view class="evaluateTitle-right">
					全部评价(99+)
					<image src="../../static/right-arrow.png" style="width:22upx;height:22upx;" mode="" @click.stop=""></image>
				</view>
			</view>
			<view class="evaluateContainer">
				<view class="evaluate-item">
					<image class="evaluate-itemlogo" src="../../static/wode.png"   mode=""></image>
					<view class="evaluate-item-content">
						<view class="evaluate-item-content-user">
							<text class="title">
								小妖
							</text>
							<text class="date">
								2019-07-02
							</text>
						</view>
						<view class="evaluate-item-content-text">
							寻寻觅觅，冷冷清清，凄凄惨惨戚戚。乍暖还寒时候，最难将息。三杯两盏淡酒，怎敌他、晚来风急？雁过也，正伤心，却是旧时相识。
							满地黄花堆积。憔悴损，如今有谁堪摘？守着窗儿，独自怎生得黑？梧桐更兼细雨，到黄昏、点点滴滴。这次第，怎一个愁字了得！
						</view>
					</view>
				</view>
				<view class="evaluate-item">
					<image class="evaluate-itemlogo" src="../../static/wode.png"   mode=""></image>
					<view class="evaluate-item-content">
						<view class="evaluate-item-content-user">
							<text class="title">
								小妖
							</text>
							<text class="date">
								2019-07-02
							</text>
						</view>
						<view class="evaluate-item-content-text">
							寻寻觅觅，冷冷清清，凄凄惨惨戚戚。乍暖还寒时候，最难将息。三杯两盏淡酒，怎敌他、晚来风急？雁过也，正伤心，却是旧时相识。
							满地黄花堆积。憔悴损，如今有谁堪摘？守着窗儿，独自怎生得黑？梧桐更兼细雨，到黄昏、点点滴滴。这次第，怎一个愁字了得！
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view  v-show="selectIndex==4">
			<!-- 商家位置 -->
			<view class="addressBox" @click="openMap()">
				<view class="addressBox-left">
					<image src="../../static/position.png" style="width:34upx;height:34upx;" mode=""></image>
					<view class="content-content">{{BusinessAddress}}</view>
				</view>
				<view class="addressBox-right">
					<image src="../../static/wechat.png" style="width:44upx;height:44upx;" mode="" @click.stop="showContactInfo()"></image>
					<image src="../../static/iphone.png" style="width:44upx;height:44upx;" mode="" @click.stop="makePhoneCall(phone)"></image>
				</view>
				
				<!-- <view class="addressFont">
					商家电话：{{phone}}
				</view> -->
			</view>
			<view class="bbox">
				
			</view>
			<!-- 商家风采 -->
			<view class="imgBox">
				<view class="imgBoxImg" v-show="dispaly" @click="magnifyTwo">
					<image :src="imgB" mode=""></image>
				</view>
	<!-- 			<view class="imgBoxImg" v-show="dispalyx">
					<image :src="imgA" mode=""></image>
				</view> -->
				<view class="imgBoxImg" v-for="(item,index) in sjimg" :key="index">
					<image :src="address+item" mode=""  @click="magnify(index)"></image>
				</view>
			</view>
			<view class="BigBOX" v-show="dispalyImgTwo" @click="clickshowTwo">
				 <image :src="imgB" mode="" ></image>
			</view>
			<view class="BigBOX"  @click="clickshow" v-show="dispalyImg">
				 <image :src="address+sjimg[imgIndex]" mode=""  ></image>
			</view>
		</view>
		<view class="mask" v-show="contactInfoDisplay" @click="showContactInfo()">
			
		</view>
		<view class="contactInfo" v-show="contactInfoDisplay">
			<text class="contactInfo-title">识别二维码添加店家微信</text>
			<image src="../../static/VRCode.png" mode="" style="width: 318upx;height:318upx;"></image>
			<text>{{name}}</text>
			<text>微信号</text>
			<text>客服电话：0816-23132123</text>
		</view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue";
	import eonfox from "@/components/eonfox/eonfox.js"
	import fns from '@/components/eonfox/fns.js';
	// #ifdef H5
	let jweixin = require('jweixin-module');
	// #endif
	var ef = new eonfox();
	export default {
		data(){
			return {
				id:'',
			    name:'',
				info:'',
				license_image_id:'',
				logimg:'',
				phone:'',
				star:'',
				imgA:'',
				imgB:'',
				sjimg:[],
				address:'',
				Latitude:'',
				Longitude:'',
				BusinessAddress:'',
				dispaly:true,
				dispalyx:true,
				distance:'',
				dispalyImg:false,
				index:0,
				imgIndex:'',
				dispalyImgTwo:false,
				dispalyImgThree:false,
				contactInfoDisplay:false,//是否展示商家联系方式
				selectIndex:4,//当前选中栏
				shopLatitude:'',
				shopLongitude:''
			}
		},
		
		methods:{
			//唤起拨号
			makePhoneCall(phone){
				uni.makePhoneCall({phoneNumber:phone});
			},
			//展示商家联系方式
			showContactInfo(){
				this.contactInfoDisplay=!this.contactInfoDisplay;
			},
			//切换Tab
			changTab(index){
				this.selectIndex=index;
			},
			openMap(){
				var _this=this
				uni.openLocation({
					latitude: parseFloat(_this.shopLatitude),
					longitude: parseFloat(_this.shopLongitude),
					name:_this.name,
					address:_this.BusinessAddress,
					success: function () {
						console.log('success');
					}
				});
				// uni.getLocation({
				// 	type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				// 	success: function (res) {
				// 		const latitude = res.latitude;
				// 		const longitude = res.longitude;
				// 		
				// 	}
				// });
			},
			//点击获取图片的下标
			magnify:function(index){
				console.log('点击了',index);
				this.imgIndex=index;
				this.dispalyImg=true;
				this.dispalyImgTwo=false;
				this.dispalyImgThree=false;
			},
			//点击关闭图片
			clickshow(){
				this.dispalyImg=false;
			},
			magnifyTwo(){
				this.dispalyImgTwo=true;
				this.dispalyImg=false;
				this.dispalyImgThree=false;
			},
			magnifyThree(){
				this.dispalyImgThree=true;
				this.dispalyImgTwo=false;
				this.dispalyImg=false;
			},
			clickshowTwo(){
				this.dispalyImgTwo=false;
			},
			clickshowThree(){
				this.dispalyImgThree=false;
			},
			returnto() {
				uni.navigateBack({
					delta:1
				})
			}
		},
		onLoad:function(e){
			console.log('传过来的值',e)
				var that=this;
				that.id=e.id;
				uni.showLoading({
					title:'加载中...'
				})
				// #ifdef APP-PLUS||MP-WEIXIN
				uni.getLocation({ 
				   type: 'wgs84',
				   success: function (res){
					   console.log('res:',res);
					   that.Latitude=res.latitude;
					   that.Longitude=res.longitude;
					   console.log('res:', that.Latitude);
					    console.log('res:', that.Longitude);
						ef.submit({
							request:{
								s: ['MERCHANTGET',[{merchant_id:that.id,lon:res.longitude,lat:res.latitude}]],
								config: ['APPLICATIONCONFIG']
							},
							callback: function(data) {
								console.log('详细内容', data);
								if (fns.checkError(data, "s", function(erron, error) {
									uni.showToast({
										title: error,
										icon: 'none'
									})
								}));
								that.address=data.data.config.data.qiniu_domain;//获取七牛的域名
								that.name=data.data.s.data.name;
								that.info=data.data.s.data.info;
								that.phone=data.data.s.data.phone;
								// that.star=parseInt(data.data.s.data.star);
								that.license_image_id=data.data.s.data.license_image_id;
								that.logimg=data.data.s.data.logo_image_id;
								that.sjimg=data.data.s.data.merchant_img;//商家其它图片
								console.log('sjimg',that.sjimg);
								that.distance=data.data.s.data.distance; //距离
								that.BusinessAddress=data.data.s.data.address //商家地址
								that.shopLatitude=data.data.s.data.latitude
								that.shopLongitude=data.data.s.data.longitude
								console.log('img',that.logimg)
								if(data.data.s.data){
									that.imgA=that.address+that.logimg;//商家log
									that.imgB=that.address+that.license_image_id;//商家营业执照
								}
								if(!that.license_image_id){
									that.dispaly=false;
								}else{
									that.dispaly=true;
								}
								if(!that.logimg){
									that.dispalyx=false;
								}else{
									that.dispalyx=true;
								}
								uni.hideLoading();
							},
						
						
									
							error: function(err) {
								uni.showToast({
									title:'出错啦',
									icon:'none'
								})
							}
								
						});
				    },
				});
				// #endif
				
				// #ifdef H5
				jweixin.ready(function(){
					jweixin.getLocation({
					   type: 'wgs84',
					   success: function (res){
						   console.log('res:',res);
						   that.Latitude=res.latitude;
						   that.Longitude=res.longitude;
						   console.log('res:', that.Latitude);
							console.log('res:', that.Longitude);
							ef.submit({
								request:{
									s: ['MERCHANTGET',[{merchant_id:that.id,lon:res.longitude,lat:res.latitude}]],
									config: ['APPLICATIONCONFIG']
								},
								callback: function(data) {
									console.log('详细内容', data);
									if (fns.checkError(data, "s", function(erron, error) {
										uni.showToast({
											title: error,
											icon: 'none'
										})
									}));
									that.address=data.data.config.data.qiniu_domain;//获取七牛的域名
									that.name=data.data.s.data.name;
									that.info=data.data.s.data.info;
									that.phone=data.data.s.data.phone;
									that.star=parseInt(data.data.s.data.star);
									that.license_image_id=data.data.s.data.license_image_id;
									that.logimg=data.data.s.data.logo_image_id;
									that.sjimg=data.data.s.data.merchant_img;//商家其它图片
									console.log('sjimg',that.sjimg);
									that.distance=data.data.s.data.distance; //距离
									that.BusinessAddress=data.data.s.data.address //商家地址
									that.shopLatitude=data.data.s.data.latitude
									that.shopLongitude=data.data.s.data.longitude
									console.log('img',that.logimg)
									if(data.data.s.data){
										that.imgA=that.address+that.logimg;//商家log
										that.imgB=that.address+that.license_image_id;//商家营业执照
									}
									if(!that.license_image_id){
										that.dispaly=false;
									}else{
										that.dispaly=true;
									}
									if(!that.logimg){
										that.dispalyx=false;
									}else{
										that.dispalyx=true;
									}
									uni.hideLoading();
								},
							
							
										
								error: function(err) {
									uni.showToast({
										title:'出错啦',
										icon:'none'
									})
								}
									
							});
						},
					});
				})
				// #endif
			
		},
		components:{
			uniIcon
		},
	}
</script>

<style>
	.content{
		font-size:28upx;
		width:100%;
		height:auto;
	}
	.head{
		width: 750upx;
		height: 300upx;
		overflow: hidden;
		position: relative;
	}
	.head image{
		width: 750upx;
		height: 180upx;
	}
	.backstyle{
		position: absolute;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-color: rgba(0,0,0,0.4);
		background-repeat: no-repeat;
		
	}
	.content-title{
		width: 100%;
		height:auto;
		display: flex;
		margin-top: -120upx;
		position: relative;
	}
	.content-content{
		padding-left: 16upx;
	}
	.title-img{
		float:left;
		width: 130upx;
		height:130upx;
		margin-left: 30upx;
		margin-right: 30upx;
		margin-top: 10upx;
	}
	.title-img image{
		width: 130upx;
		height:130upx;
		border-radius: 6upx;
	}
	.title-font{
		width: 540upx;
		height: 150upx;
		float: left;
		margin-top: 10upx;
		color: #FFF;
	}
	.fontBox{
		width: 100%;
		height: 50upx;
		line-height: 50upx;
		font-size: 36upx;
	}
	.fontInfo{
		font-size: 24upx;
	}
	.bbox{
		width: 100%;
		height:20upx;
		background-color: #e4e2e2;
	}
	.addressBox{
		width: 690upx;
		height:auto;
		padding-top: 20upx;
		padding-bottom: 20upx;
		padding-left:30upx;
		display: flex;
		justify-content: space-between;
	}
	.addressBox-left{
		display: flex;
	}
	.addressBox-right{
		display: flex;
		width:148upx;
		justify-content: space-between;
	}
	.imgBox{
		width: 690upx;
		padding:0 30upx;
		height: auto;
		display: flex;
		flex-wrap: wrap;
	}
	.imgBoxImg{
		margin-top:40upx;
		margin-left: 5upx;
		margin-right: 5upx;
		width: 220upx;
		height:220upx;
	}
	.imgBoxImg image{
		width: 220upx;
		height:220upx;
		border-radius: 10upx;
	}
	.BigBOX{
		position:fixed;
		float: left;
		top:0upx;
		width:100%;
		height:1600upx;
		background-color: #101010;
	}
	.BigBOX image{
		float: left;
		width: 100%;
		height: 600upx;
		margin-top: 200upx;
	}
	.tab{
		height:90upx;
		display: flex;
		justify-content: space-between;
	}
	.tab-item{
		width: 25%;
		height:90upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.tab-item-checked{
		border-bottom:solid 4upx #F8C6B5 ;
	}
	.mask {  
		position: fixed;  
		top:0;  
		left:0;  
		z-index:4;  
		width:100%;  
		height:100vh;  
		background:rgba(0,0,0,0.4);  
	}  
	.contactInfo{
		z-index:5;  
		position: fixed;
		width:500upx;
		height:570upx;
		background-color: #fff;
		border-radius:10upx ;
		top:25vh;
		left: 125upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		font-size: 28upx;
	}
	.contactInfo-title{
		
		font-size: 32upx;
		font-weight: 500;
	}
	.evaluateTitle{
		display: flex;
		width: 730upx;
		height: 80upx;
		align-items: center;
		justify-content: space-between;
	}
	.evaluateTitle-left{
		font-size: 32upx;
		align-items: center;
		display: flex;
	}
	.evaluateTitle-leftBack{
		width:20upx;
		height: 34upx;
		background-color:#F8C6B5 ;
		margin-right: 20upx;
	}
	.evaluateTitle-right{
		display: flex;
		font-size: 24upx;
		align-items: center;
	}
	.evaluateContainer{
		width: 710upx;
		padding-left: 40upx;
	}
	.evaluate-item{
		border-bottom: solid 2upx #BFBFBF;
		display: flex;
		padding: 20upx 0;
	}
	.evaluate-itemlogo{
		width: 80upx;
		height: 80upx;
		border-radius: 40upx;
	}
	.evaluate-item-content{
		width:590upx;
		padding-left: 20upx;
		font-size: 28upx;
	}
	.evaluate-item-content-user{
		display: flex;
		flex-direction: column;
		height: 80upx;
		justify-content: space-between;
	}
	.evaluate-item-content-user .title{
		font-size: 28upx;
	}
	.evaluate-item-content-user .date{
		font-size: 24upx;
	}
	.evaluate-item-content-text{
		padding-top: 20upx;
	}
	.categroy{
		width:710upx;
		padding: 20upx 20upx;
		display:flex;
		flex-wrap: wrap;
	}
	.categroy-item{
		width: 174.5upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 50upx;
	}
	.categroy-item-img{
		width: 80upx;
		height:80upx;
	}
	.categroy-item-text{
		margin-top: 20upx;
	}
</style>
